<!--  -->
<template>
    <div>

<!--内容-->
<div class="m-container ">
    <div class="ui container m-pad-tb-big m-margin-tb-big m-opacity segment" style="height:567px;">
        <div class="ui segment form">
            <div class="inline fields m-pad-tb">
                <div class="field ">
                    <input type="text" placeholder="标题" v-model="searchBlog.title">
                </div>
                <div class="field">
                    <select class="ui dropdown" v-model="searchBlog.typeId">
                        <option :value="type.id" v-for="type in types" :key="type.id">{{type.name}}</option>
                    </select>
                </div>
                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="published" v-model="searchBlog.published">
                        <label for="published">发布</label>
                    </div>
                </div>
                <div class="field">
                    <button class="ui teal basic button" @click="getBlogs(1)"><i class="search icon"></i>搜索</button>
                </div>
            </div>
        </div>

        <table class="ui celled striped table">
            <thead>
                <tr>
                    <th></th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>推荐</th>
                    <th>状态</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(blog,i) in pageInfo.list" :key="blog.id">
                    <td>{{i+1}}</td>
                    <td>{{blog.title}}</td>
                    <td>{{blog.type.name}}</td>
                    <td>{{blog.recommend?"是":"否"}}</td>
                    <td>{{blog.published?"发布":"草稿"}}</td>
                    <td>{{blog.updateTime | formatDate("YYYY-MM-DD HH:mm")}}</td>
                    <td>
                        <router-link class="ui mini teal basic button" :to="'/admin/inputBlog/'+blog.id">编辑</router-link>
                        <a class="ui mini red basic button" @click="deleteBlog(blog.id)">删除</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="7">
                        <div class="ui pagination menu">
                            <a class="item" v-if="!pageInfo.isFirstPage" @click="getBlogs(pageInfo.pageNum-1)">上一页</a>
                            <a class="item" v-if="!pageInfo.isLastPage" @click="getBlogs(pageInfo.pageNum+1)">下一页</a>
                        </div>
                        <router-link class="ui  teal basic button right floated" to="/admin/inputBlog/-1"><i class="ui edit icon"></i>新增</router-link>
                    </th>
                </tr>
            </tfoot>
        </table>

    </div>
</div>

<br>
<br>
<br>

    </div>
</template>

<script>
import moment from "moment"
export default {
    data () {
        return {
            types:"",
            searchBlog:{
                title:"",
                typeId:"",
                published:true
            },
            pageInfo:"",
        };
    },
    methods:{
        getBlogs(pageNum){
            var _this = this
            if(_this.searchBlog.typeId=="")
                _this.searchBlog.typeId=-1
            _this.axios.get("/admin/searchBlogList",{
                params:{
                    title:_this.searchBlog.title,
                    typeId:_this.searchBlog.typeId,
                    published:_this.searchBlog.published,
                    pageNum:pageNum
                }
            }).then(res =>{
                _this.pageInfo = res.data.pageInfo
            }).catch(e=>{
                console.log(e)
            })
        },
        deleteBlog(id){
            if(confirm('确定要删除该博客吗？')){
                var _this = this
                _this.axios.post("/admin/deleteBlog",{
                    id:id
                }).then(res =>{
                    if(res.data.status === 200){
                        //是否为该页最后一个
                        if(_this.pageInfo.total%5==1)
                            _this.pageInfo.pageNum-=1
                        _this.getBlogs(_this.pageInfo.pageNum)
                    }
                    alert(res.data.msg)
                }).catch(e =>{
                    console.log(e)
                })
            }
        }
    },
    created(){
        var _this = this
        _this.axios.get(
            "/admin/getAllType"
        ).then(res =>{
            _this.types = res.data.types
        }).catch(e =>{
            console.log(e)
        })
        this.getBlogs()
    },
    //页面挂载后执行
    mounted(){
        $('.ui.dropdown').dropdown({})
    },
}

</script>
<style lang='scss' scoped>
</style>